<template>
  <el-table :data="rolelist" border style="width: 100%" >
    <el-table-column prop="id" label="规格编号"                             ></el-table-column>
    <el-table-column prop="specsname" label="规格名称"  > </el-table-column>
    <el-table-column prop="attrs" label="规格属性"  >
       <template slot-scope="scope">
          <el-tag v-for="(item,index) in scope.row.attrs" :key="index" type="info" >{{item}}</el-tag>
       </template>
       </el-table-column>
    <el-table-column prop="status" label="状态" >
        <template slot-scope="scope" >
            <el-tag type="primary" v-if="scope.row.status==1">启用</el-tag>
            <el-tag type="danger" v-else>禁用</el-tag>
        </template>
         </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button size="mini" 
        type="primary"
        @click="edit(scope.row.id)"
          >编辑</el-button
        >
        <el-button
          size="mini"
          type="danger"
          @click="del(scope.row.id)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import {delSpecs,specsList} from "../../util/axios"
export default {
  data(){
    return{
    rolelist:[],
    page:1,
    }
  },
  mounted(){
      //拿到数据进行渲染
     this.getSpecsList();
  },
  methods:{
    //编辑功能
     edit(id){
        this.$emit("edit",id);
     },
     //获取数据渲染
     getSpecsList(){
        specsList({size:2,page:this.page}).then(res=>{
          if(res.code == 200){
            this.rolelist = res.list?res.list:[];
            if(this.page > 1 && res.list.length ==0){
                this.page--;
                this.getSpecsList();
                return
            }
            this.rolelist = res.list;
          }
        })
     },
     search(n){
        this.page = n;
        this.getSpecsList();
     },
     //删除功能
     del(id){
         this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           delSpecs({id}).then(res=>{
             if(res.code == 200){
               this.$message.success(res.msg);
              this.$emit("rolad")
             }else{
               this.$message.error(res.msg)
             }
            
           })
        }).catch(() => {
          this.$message.info("已取消删除")       
        });
    }
  }
 
    }

</script>

<style lang="stylus" scoped>

</style>